<template>
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button-group style="float: right;">
        <el-button v-hasPerm="['market:warnRule:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
      </el-button-group>
    </div>
    <div class="body-wrapper">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="数据API" prop="apiId">
          <el-select v-model="form.apiId" placeholder="请选择数据API" @change="apiSelectChanged">
            <el-option
              v-for="api in apiOptions"
              :key="api.id"
              :label="api.apiName"
              :value="api.id"
              :disabled="api.status === '0'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="监控指标" prop="metric">
          <el-select v-model="form.metric" placeholder="请选择监控指标">
            <el-option
              v-for="metric in metricOptions"
              :key="metric.id"
              :label="metric.itemValue"
              :value="metric.itemText"
              :disabled="metric.status === '0'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单位时间	" prop="unitTime">
          <el-select v-model="form.unitTime" placeholder="请选择单位时间">
            <el-option
              v-for="unitTime in unitTimeOptions"
              :key="unitTime.id"
              :label="unitTime.itemText"
              :value="unitTime.itemValue"
              :disabled="unitTime.status === '0'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作符" prop="operator">
          <el-select v-model="form.operator" placeholder="请选择操作符">
            <el-option
              v-for="operator in operatorOptions"
              :key="operator.id"
              :label="operator.itemText"
              :value="operator.itemValue"
              :disabled="operator.status === '0'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="触发阈值" prop="triggerThreshold">
          <el-input v-model.number="form.triggerThreshold" placeholder="请输入触发阈值" />
        </el-form-item>
        <el-form-item label="静默期" prop="silentPeriod">
          <el-select v-model="form.silentPeriod" placeholder="请选择静默期">
            <el-option
              v-for="silentPeriod in silentPeriodOptions"
              :key="silentPeriod.id"
              :label="silentPeriod.itemText"
              :value="silentPeriod.itemValue"
              :disabled="silentPeriod.status === '0'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.id"
              :label="dict.itemText"
            >{{ dict.itemValue }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
  import { addApiWarnRule } from '@/api/market/apiwarnrule'
  import { listDataApi, getDataApi } from '@/api/market/dataapi'

  export default {
    name: 'ApiMaskAdd',
    props: {
      data: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    data() {
      var checkTriggerThreshold = (rule, value, callback) => {
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          }
        }, 1000);
      };
      return {
        title: '监控规则新增',
        // 展示切换
        showOptions: {
          data: {},
          showList: true,
          showAdd: false,
          showEdit: false,
          showDetail: false
        },
        // 保存按钮
        loadingOptions: {
          loading: false,
          loadingText: '保存',
          isDisabled: false
        },
        // 表单参数
        form: {
          id: undefined,
          metric: undefined,
          unitTime: undefined,
          operator: undefined,
          triggerThreshold: undefined,
          notificationMethod: undefined,
          silentPeriod: undefined,
          status: '1',
          remark: undefined
        },

        // 表单校验
        rules: {
          metric: [
            { required: true, message: '监控指标不能为空', trigger: 'blur' }
          ],
          unitTime: [
            { required: true, message: '单位时间不能为空', trigger: 'blur' }
          ],
          operator: [
            { required: true, message: '操作符不能为空', trigger: 'blur' }
          ],
          triggerThreshold: [
            { required: true, message: '触发阈值不能为空', trigger: 'blur' },
          ],
          silentPeriod: [
            { required: true, message: '静默期不能为空', trigger: 'blur' }
          ],
        },
        apiOptions: [],
        statusOptions: [],
        metricOptions: [],
        unitTimeOptions: [],
        operatorOptions: [],
        notificationMethodOptions: [],
        silentPeriodOptions: [],
      }
    },
    created() {
      this.getDicts('sys_common_status').then(response => {
        if (response.success) {
          this.statusOptions = response.data
        }
      })
      this.getDicts('monitor_metric').then(response => {
        if (response.success) {
          this.metricOptions = response.data
        }
      })
      this.getDicts('unit_time').then(response => {
        if (response.success) {
          this.unitTimeOptions = response.data
        }
      })
      this.getDicts('operator').then(response => {
        if (response.success) {
          this.operatorOptions = response.data
        }
      })
      this.getDicts('notification_method').then(response => {
        if (response.success) {
          this.notificationMethodOptions = response.data
        }
      })
      this.getDicts('silent_period').then(response => {
        if (response.success) {
          this.silentPeriodOptions = response.data
        }
      })

      this.getDataApiList();
    },
    methods: {
      getDataApiList() {
        listDataApi().then(response => {
          if (response.success) {
            this.apiOptions = response.data
          }
        })
      },
      apiSelectChanged(val) {
        getDataApi(val).then(response => {
          if (response.success) {
            this.resParamList = response.data.resParams
          }
        })
      },
      showCard() {
        this.$emit('showCard', this.showOptions)
      },
      /** 提交按钮 */
      submitForm: function() {
        debugger
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.loadingOptions.loading = true
            this.loadingOptions.loadingText = '保存中...'
            this.loadingOptions.isDisabled = true
            addApiWarnRule(this.form).then(response => {
              if (response.success) {
                this.$message.success('保存成功')
                setTimeout(() => {
                  // 2秒后跳转列表页
                  this.$emit('showCard', this.showOptions)
                }, 2000)
              } else {
                this.$message.error('保存失败')
                this.loadingOptions.loading = false
                this.loadingOptions.loadingText = '保存'
                this.loadingOptions.isDisabled = false
              }
            }).catch(() => {
              this.loadingOptions.loading = false
              this.loadingOptions.loadingText = '保存'
              this.loadingOptions.isDisabled = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-card ::v-deep .el-card__body {
    height: calc(100vh - 230px);
    overflow-y: auto;
  }
</style>
